const searchInput = document.getElementById('searchInput');
const suggestions = document.getElementById('suggestions');
const searchButton = document.getElementById('searchButton');


searchInput.addEventListener('input', function () {
    const inputValue = searchInput.value;
    if (inputValue === '') {
        suggestions.classList.add('hidden');
    } else {
        suggestions.classList.remove('hidden');
        const liElements = suggestions.querySelectorAll('li');
        liElements.forEach((li) => {
            const text = li.textContent;
            if (text.includes(inputValue)) {
                li.style.display = 'block';
            } else {
                li.style.display = 'none';
            }
        });
    }
});

suggestions.addEventListener('click', function (event) {
    if (event.target.tagName === 'LI') {
        const selectedText = event.target.textContent;
        searchInput.value = selectedText;
        suggestions.classList.add('hidden');
    }
});

searchButton.addEventListener('click', function () {
    const searchValue = searchInput.value;
    // 这里可以添加实际的搜索逻辑，比如发送请求到后端接口
    console.log('搜索内容:', searchValue);
});


function updateSuggestions(items) {
    suggestions.innerHTML = items.map(item => `<li>${item}</li>`).join('');
    suggestions.scrollTop = 0; // 滚动到顶部
}
searchInput.addEventListener('keydown', function (e) {
    const items = suggestions.querySelectorAll('li');
    let currentFocus = -1;

    if (e.key === 'ArrowDown') {
        currentFocus = (currentFocus + 1) % items.length;
        // 自动滚动到选中项
        items[currentFocus].scrollIntoView({ block: 'nearest' });
    } else if (e.key === 'ArrowUp') {
        currentFocus = (currentFocus - 1 + items.length) % items.length;
        items[currentFocus].scrollIntoView({ block: 'nearest' });
    }
});




const feature1 =document.querySelector('.feature1');
feature1.addEventListener('click',function(){
    window.location.href = '../item/item1.html';
})
const feature2 =document.querySelector('.feature2');
feature2.addEventListener('click',function(){
    window.location.href = '../item/item2.html';
})
const feature3 =document.querySelector('.feature3');
feature3.addEventListener('click',function(){
    window.location.href = '../item/item3.html';
})
const feature4 =document.querySelector('.feature4');
feature4.addEventListener('click',function(){
    window.location.href = '../item/item4.html';
})
const feature5 =document.querySelector('.feature5');
feature5.addEventListener('click',function(){
    window.location.href = '../item/item5.html';
})
const feature6 =document.querySelector('.feature6');
feature6.addEventListener('click',function(){
    window.location.href = '../item/item6.html';
})

// 示例：语言选择器点击展开功能
const languageSelect = document.querySelector('.language-select');
languageSelect.addEventListener('click', function () {
    // 这里可以添加展开/收起下拉菜单的逻辑
    console.log('Language select clicked');
});





const inputValue = document.querySelector('.searchinput').value;
document.getElementById('searchBox').addEventListener('input', function () {
    const value = this.value.trim();
    const suggestionsList = document.getElementById('suggestions');

    if (!value) {
        suggestionsList.style.display = 'none';
        while (suggestionsList.firstChild) {
            suggestionsList.removeChild(suggestionsList.firstChild);
        }
        return;
    }

    // 显示建议框
    suggestionsList.style.display = 'block';

    // 清空之前的选项
    while (suggestionsList.firstChild) {
        suggestionsList.removeChild(suggestionsList.firstChild);
    }


    // 如果有匹配的结果，则动态创建并插入新的 <li> 元素
    if (filteredSuggestions.length > 0) {
        filteredSuggestions.forEach(function (item) {
            const listItem = document.createElement('li');
            listItem.textContent = item;

            // 添加点击事件监听器以自动填充到输入框中
            listItem.addEventListener('click', function () {
                document.getElementById('searchBox').value = item;
                suggestionsList.style.display = 'none';
            });

            suggestionsList.appendChild(listItem);
        });
    } else {
        const noResultMessage = document.createElement('li');
        noResultMessage.textContent = '未找到相关内容';
        noResultMessage.style.color = '#aaa';
        suggestionsList.appendChild(noResultMessage);
    }
});



// 搜索点击跳转功能

//创建答案页面
//获取容量元素
const container = document.querySelector('.card-item');
axios.get('/api/faq/search')
    .then(response=>{
        //清理旧数据
        container.innerHTML = '';

        //生成答案动态页面卡片
        response.data.data.rows.forEach(item=>{
            const div = document.createElement('div');
            div.className = 'container';
            div.innerHTML = `
       <header>
        <div class="feature" style="">x</div>
        <h1>${item.question}</h1>
       </header>
       <main>
        <div class="answer">
          <p>
           ${item.answer}
          </p>
          <img src="../answer/footer-back.jpg" alt="页脚照片">
        </div>
      </main>
      <footer>
        <p>&copy; 2025 星火小组. 版权所有</p >
      </footer>
      `;
            container.appendChild(div);
            //点击跳转
            div.addEventListener('click',function(){
                window.location.href = `../item/item${item.id}.html`;
            })
        });
    })
    .catch(error=>{
        container.innerHTML = '<div class="error">加载失败</div>';
    });
